안녕하세요, 여러분! 오늘은 Next.js에 Styled Components를 적용하는 방법에 대해 알아보려고 합니다. 이 과정을 통해 Next.js와 Styled Components의 찰떡궁합을 경험하게 될 거예요. 그럼 시작해볼까요?

Next.js에 Styled Components 적용하기: 쉽게 따라하는 가이드

1. 프로젝트 초기화하기

먼저, Next.js 프로젝트를 시작해야겠죠? 다음 명령어를 터미널에 입력하여 새로운 Next.js 프로젝트를 생성해봅시다.

bash
npx create-next-app@latest my-next-app
cd my-next-app

my-next-app 대신 원하는 프로젝트 이름을 입력하면 됩니다. 프로젝트 생성이 완료되면, 해당 디렉토리로 이동하세요.

2. Styled Components 설치하기

이제 우리의 주인공, Styled Components를 설치할 차례입니다. 아래 명령어를 실행해 주세요:

bash
npm install styled-components
npm install --save-dev babel-plugin-styled-components

첫 번째 명령어는 Styled Components를 설치하고, 두 번째 명령어는 서버 사이드 렌더링을 지원하기 위한 Babel 플러그인을 설치합니다.

3. Babel 설정하기

Styled Components가 제대로 작동하려면 Babel 설정이 필요합니다. 프로젝트 루트 디렉토리에 .babelrc 파일을 생성하고 다음 내용을 추가하세요:

json
{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

이 설정은 Styled Components가 서버 사이드 렌더링 시에도 올바르게 동작하도록 도와줍니다.

4. _document.js 설정하기

이제 서버 사이드 렌더링을 위한 준비를 마무리해야 합니다. pages 디렉토리 아래에 _document.js 파일을 생성하거나 이미 존재하는 파일을 수정하세요. 다음 코드를 추가합니다:

javascript
import Document from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

이 설정을 통해 Styled Components가 서버에서 스타일을 올바르게 처리할 수 있게 됩니다.

5. Styled Components 사용하기

드디어 Styled Components를 사용할 준비가 되었습니다! 예를 들어, pages/index.js 파일을 열고 다음과 같이 수정해보세요:

javascript
import styled from "styled-components";

const Title = styled.h1`
  color: #0070f3;
  font-size: 50px;
`;

export default function Home() {
  return (
    <div>
      <Title>Welcome to Next.js with Styled Components!</Title>
    </div>
  );
}

이제 우리는 스타일이 적용된 멋진 타이틀을 갖게 되었습니다. 개발 서버를 실행하여 결과를 확인해볼까요?

bash
npm run dev

브라우저에서 http://localhost:3000을 열어 스타일이 제대로 적용되었는지 확인해보세요. 짜잔! 잘 작동하죠?

결론

축하합니다! 이제 Next.js 프로젝트에 Styled Components를 성공적으로 적용했습니다. 이 과정이 어렵지 않았길 바라요. Next.js와 Styled Components를 사용하면 더 멋진 웹 애플리케이션을 만들 수 있으니, 다양한 시도를 통해 더욱 멋진 프로젝트를 만들어보세요.

궁금한 점이나 더 알고 싶은 내용이 있다면 언제든지 댓글로 남겨주세요. 그럼 다음에 또 만나요! Happy Coding! 🚀